<template>
	<view class="container">

		<picker bindchange="bindPickerChange" :value="index" :range="array">
			<view class="picker">
				<view class="fb-type">
					<view class="type-label">{{array[index]}}</view>
					<image class="type-icon" src="/static/images/down.png"></image>

				</view>
			</view>
		</picker>
		<view class="fb-body">
			<textarea class="content" placeholder="对我们网站、商品、服务，你还有什么建议吗？你还希望在商城上买到什么？请告诉我们..." @input="contentInput" maxlength="500"
			 auto-focus="true" :value="content"></textarea>
			<view class="weui-uploader__files" id="uploaderFiles">
				<block v-for="(item,index) in files" :key="index">
					<view class="weui-uploader__file" @tap="previewImage" :id="item">
						<image class="weui-uploader__img" :src="item" mode="aspectFill" />
					</view>
				</block>
				<view class="weui-uploader__input-box" v-if=" files.length < 5 ">
					<view class="weui-uploader__input" @tap="chooseImage"></view>
				</view>
			</view>
			<view class="text-count">{{contentLength}}/500</view>
		</view>
		<view class="fb-mobile">
			<view class="label">手机号码</view>
			<view class="mobile-box">
				<input class="mobile" maxlength="11" type="number" placeholder="方便我们与你联系" @input="mobileInput" :value="mobile" />
				<image class="clear-icon" src="/static/images/clear_input.png" v-if=" mobile.length > 0 " catchtap="clearMobile"></image>
			</view>
		</view>

		<view class="fb-btn" @tap="submitFeedback">提交</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'user', 'code'])
		},
		data() {
			return {
				array: ['请选择反馈类型', '商品相关', '功能异常', '优化建议', '其他'],
				index: 0,
				content: '',
				contentLength: 0,
				mobile: '',
				hasPicture: false,
				picUrls: [],
				files: []
			}
		},
		methods: {
			chooseImage: function(e) {
				if (this.files.length >= 5) {
					this.$util.showErrorToast('只能上传五张图片')
					return false;
				}

				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						that.files = that.files.concat(res.tempFilePaths);
						that.upload(res);
					}
				})
			},
			upload: function(res) {
				var that = this;
				const uploadTask = uni.uploadFile({
					url: that.$api.api.StorageUpload,
					filePath: res.tempFilePaths[0],
					name: 'file',
					success: function(res) {
						var _res = JSON.parse(res.data);
						if (_res.errno === 0) {
							var url = _res.data.url
							that.picUrls.push(url)
							that.hasPicture = true;
						}
					},
					fail: function(e) {
						uni.showModal({
							title: '错误',
							content: '上传失败',
							showCancel: false
						})
					},
				})

				uploadTask.onProgressUpdate((res) => {
					console.log('上传进度', res.progress)
					console.log('已经上传的数据长度', res.totalBytesSent)
					console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
				})

			},
			previewImage: function(e) {
				uni.previewImage({
					current: e.currentTarget.id, // 当前显示图片的http链接
					urls: this.files // 需要预览的图片http链接列表
				})
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value;
			},
			mobileInput: function(e) {
				this.mobile = e.detail.value;
			},
			contentInput: function(e) {
				this.contentLength = e.detail.cursor;
				this.content = e.detail.value;
			},
			clearMobile: function(e) {
				this.mobile = '';
			},
			submitFeedback: function(e) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "/pages/auth/login/login"
					});
				}

				let that = this;
				if (that.index == 0) {
					that.$util.showErrorToast('请选择反馈类型');
					return false;
				}

				if (that.content == '') {
					that.$util.showErrorToast('请输入反馈内容');
					return false;
				}

				if (that.mobile == '') {
					that.$util.showErrorToast('请输入手机号码');
					return false;
				}

				if (!that.$check.isValidPhone(this.data.mobile)) {
					this.mobile = '';
					that.$util.showErrorToast('请输入手机号码');
					return false;
				}

				uni.showLoading({
					title: '提交中...',
					mask: true,
					success: function() {

					}
				});

				that.$util.request(api.FeedbackAdd, {
					mobile: that.mobile,
					feedType: tha.array[that.index],
					content: that.content,
					hasPicture: that.hasPicture,
					picUrls: that.picUrls
				}, 'POST').then(function(res) {
					uni.hideLoading();
					if (res.errno === 0) {
						uni.showToast({
							title: '感谢您的反馈！',
							icon: 'success',
							duration: 2000,
							complete: function() {
								that.index = 0;
								that.content = '';
								that.contentLength = 0;
								that.mobile = '';
								that.hasPicture = false;
								that.picUrls = [];
								that.files = [];
							}
						});
					} else {
						that.$util.showErrorToast(res.errmsg);
					}

				});
			},
		}
	}
</script>

<style>
	page {
		background: #f4f4f4;
		min-height: 100%;
	}

	.container {
		background: #f4f4f4;
		min-height: 100%;
		padding-top: 30rpx;
	}

	.fb-type {
		height: 104rpx;
		width: 100%;
		background: #fff;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.fb-type .type-label {
		height: 36rpx;
		flex: 1;
		color: #333;
		font-size: 28rpx;
	}

	.fb-type .type-icon {
		height: 36rpx;
		width: 36rpx;
	}

	.fb-body {
		width: 100%;
		background: #fff;
		height: 600rpx;
		padding: 18rpx 30rpx 64rpx 30rpx;
	}

	.fb-body .content {
		width: 100%;
		height: 400rpx;
		color: #333;
		line-height: 40rpx;
		font-size: 28rpx;
	}

	.weui-uploader__files {
		width: 100%;
	}

	.weui-uploader__file {
		float: left;
		margin-right: 9px;
		margin-bottom: 9px;
	}

	.weui-uploader__img {
		display: block;
		width: 50px;
		height: 50px;
	}

	.weui-uploader__input-box {
		float: left;
		position: relative;
		margin-right: 9px;
		margin-bottom: 9px;
		width: 50px;
		height: 50px;
		border: 1px solid #d9d9d9;
	}

	.weui-uploader__input-box:after,
	.weui-uploader__input-box:before {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #d9d9d9;
	}

	.weui-uploader__input-box:before {
		width: 2px;
		height: 39.5px;
	}

	.weui-uploader__input-box:after {
		width: 39.5px;
		height: 2px;
	}

	.weui-uploader__input-box:active {
		border-color: #999;
	}

	.weui-uploader__input-box:active:after,
	.weui-uploader__input-box:active:before {
		background-color: #999;
	}

	.weui-uploader__input {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.fb-body .text-count {
		line-height: 30rpx;
		float: right;
		color: #666;
		font-size: 24rpx;
	}

	.fb-mobile {
		height: 162rpx;
		width: 100%;
	}

	.fb-mobile .label {
		height: 58rpx;
		width: 100%;
		padding-top: 14rpx;
		padding-bottom: 11rpx;
		color: #7f7f7f;
		font-size: 24rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		line-height: 33rpx;
	}

	.fb-mobile .mobile-box {
		height: 104rpx;
		width: 100%;
		color: #333;
		padding-left: 30rpx;
		padding-right: 30rpx;
		font-size: 24rpx;
		background: #fff;
		position: relative;
	}

	.fb-mobile .mobile {
		position: absolute;
		top: 27rpx;
		left: 30rpx;
		height: 50rpx;
		width: 100%;
		color: #333;
		line-height: 50rpx;
		font-size: 24rpx;
	}

	.fb-mobile .clear-icon {
		position: absolute;
		top: 27rpx;
		right: 30rpx;
		width: 48rpx;
		height: 48rpx;
		z-index: 2;
	}

	.fb-btn {
		background-color: #85c43f;
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
	}
</style>
